
// 1.0 导入useEffect
import { useState, useEffect } from 'react'

function UseEffectDemo() {
    let [count, setCount] = useState(1);
    let [age, setAge] = useState(18);
    // 2.0 模拟类组件的componentDidMount功能
    // 在函数式组件中可以通过useEffect 去向服务器请求数据   
    /*
    useEffect() 
     参数1： 回调函数，功能类似于componentDidMount 和 componentDidUpdate
     参数2：依赖的数组,如果不写，每次状态属性更新都会触发执行
       需求：当前useEffect的第一个参数（回调函数）不依赖任何的状态属性的改变而触发，此时可以使用空数组：[]
       参数2：如果写的是一个[] 回调函数只会在初次页面渲染完以后触发执行，以后状态属性改变都不会触发执行

    */
    useEffect(() => {
        // 向服务器请求到了数据2，更新到状态属性count上去
        // setTimeout(() => {
        //     setCount(2)
        // }, 1000);
        console.log('2.0页面渲染完毕以后触发执行');
        // document.body.addEventListener('click', () => { })
        // 返回的函数会优先于useEffect的函数执行，可以做一些销毁的操作
        return () => {
            console.log('1.0 useEffect回调函数执行之前触发');
        }
    }, [count, age])

    // console.log('1.0 页面渲染');

    return (<div>
        count:{count} <br />
        UseEffectDemo :{age} <br />
        <button onClick={() => { setAge(age => age + 1) }}>age+1</button>
    </div>)
}

export default UseEffectDemo;